<template>
  <div class="mnt-dialog form-container">
    <el-form ref="form" :model="formModel" label-width="120px" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户登录名:" prop="username">
            <el-input :disabled="disablUsername" v-model="formModel.username" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="员工号:" prop="engineerCode">
            <el-input v-model="formModel.engineerCode" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="SAP用户名:" prop="sapUsername">
            <el-input v-model="formModel.sapUsername" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户描述:" prop="description">
            <el-input v-model="formModel.description" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="真实姓名:" prop="realName">
            <el-input v-model="formModel.realName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属部门:" prop="depId">
            <el-input disabled v-model="formModel.depId" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="办公地址:" prop="officeLocation">
            <el-input v-model="formModel.officeLocation" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话号码:" prop="telephone">
            <el-input v-model="formModel.telephone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电子邮件:" prop="email">
            <el-input v-model="formModel.email" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="传真:" prop="userFax">
            <el-input v-model="formModel.userFax" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="showPassword">
          <el-form-item label="用户密码:" prop="password">
            <el-input v-model="formModel.password" show-password></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="showPassword">
          <el-form-item label="确认密码:" prop="confirmPassword">
            <el-input v-model="formModel.confirmPassword" show-password></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="用户角色:" prop="roleIdList">
            <el-transfer
              style="text-align: left; display: inline-block"
              filterable
              v-model="formModel.roleIdList"
              :titles="['未拥有角色列表', '已拥有角色列表']"
              :button-texts="['到左边', '到右边']"
              @left-check-change="chooseRole"
              @change="changeRole"
              :data="rolesOptions">
            </el-transfer>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="submit-area">
      <el-col :span="24">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleSubmit()">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import md5 from 'js-md5'
export default {
  name: 'UserMnt',
  props: ['pageType', 'editData'],
  data() {
    return {
      rolesOptions:[],
      chooseRoleArr:[],
      roleMutualExclusion:{},
      showPassword:true,
      disablUsername:false,
      formModel: {
        userid: '',
        username: '',
        engineerCode: '',
        sapUsername: '',
        description: '',
        realName: '',
        depId: '',
        depName: '',
        officeLocation: '',
        telephone: '',
        email: '',
        userFax: '',
        password: '',
        confirmPassword: '',
        roleIdList: [],
        businessType: [],
      },
      rules: {

      }
    }
  },
  computed: {

  },
  mounted() {
    this.init()
    this.getRolesOptions();
  },
  methods: {
    init() {
      this.$form = this.$refs.form
      const { pageType, editData, formModel } = this
      if (pageType === 'edit') {
        this.assignData(editData, formModel)
        this.disablUsername = true
        this.showPassword = false
        if(formModel.roleIdList && formModel.roleIdList.length>0){
          for(let i=0;i<formModel.roleIdList.length;i++){
            this.chooseRoleArr.push(formModel.roleIdList[i])
          }
        }else{
          formModel.roleIdList = []
        }
      }
      this.initRules()
    },
    initRules() {
      const REQUIRED_MSG = this.CONST.REQUIRED_MSG
      this.rules = {
        username: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        password: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        confirmPassword: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        roleIdList: [{ required: true, message: REQUIRED_MSG, trigger: ['change', 'blur'] }],
        email: this.HEY_VALIDATOR({ type: ['EMAIL'], required: false }),
        telephone: this.HEY_VALIDATOR({ type: ['MOBILE'], required: false }),
      }
      this.$nextTick(_ => {
        this.$form.clearValidate()
      })
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const { pageType, formModel } = this
          if (formModel.roleIdList.length == 0) {
            this.$message.warning('请配置该用户的角色!')
            return false
          }
          const param = { ...formModel }
          if(pageType=='add'){
            if (formModel.password != formModel.confirmPassword) {
              this.$message.warning('密码两次输入不一致!')
              return false
            }
            param.password = md5(formModel.password)
          }
          const operateType = pageType === 'edit' ? '02' : '01'
          param.operateType = operateType
          const url = '/user/maintainUser'
          const tip = pageType === 'add' ? '新增成功！' : '修改成功！'
          this.post(url, param).then(res => {
            this.$info(tip, () => {
              this.$emit('mntSuc', res)
              this.closeDialog()
            })
          })
        }
      })
    },
    //当选择某一个角色时的互斥逻辑
    chooseRole(key){
      var roleArr = []
      const obj = this.roleMutualExclusion
      const roles = this.rolesOptions
      if(key.length>0){
        for(let i=0;i<key.length;i++){
          roleArr.push(key[i])
        }
      }
      if(this.chooseRoleArr.length>0){
        for(let i=0;i<this.chooseRoleArr.length;i++){
          roleArr.push(this.chooseRoleArr[i])
        }
      }
      if(roleArr.length==0){
        if(roles.length>0){
          roles.filter(function (value,index) {
            roles[index].disabled = false
          })
          this.rolesOptions = roles
        }
      }else{
        var disabledArr = []
        if(roles.length>0){
          for(let i=0;i<roleArr.length;i++){
            //获取对应的互斥角色
            var arr = obj[roleArr[i]]
            if(arr&&arr.length>0){
              for(let j=0;j<arr.length;j++){
                roles.filter(function (value,index) {
                  if(value.key == arr[j]){
                    //将需要屏蔽的角色ID缓存起来
                    disabledArr.push(value.key)
                  }
                })
              }
            }
          }
        }
        if(disabledArr.length>0){
          roles.filter(function (value,index) {
            if(disabledArr.includes(value.key)){
              roles[index].disabled = true
            }else{
              roles[index].disabled = false
            }
          })
        }else{
          roles.filter(function (value,index) {
            roles[index].disabled = false
          })
        }
      }
    },
    changeRole(value,direction,key){
      if(direction=='left'){
        if(value.length>0){
          this.chooseRoleArr = value
          this.chooseRole([])
        }else{
          this.chooseRoleArr = []
          this.chooseRole([])
        }
      }
      if(direction=='right'){
        for(let i=0;i<key.length;i++){
          this.chooseRoleArr.push(key[i])
        }
      }
    },
    //获取所有角色信息
    getRolesOptions(){
      const param = {pageNum:1,pageSize:9999}
      param.isDelete = '0'
      this.get('/role/queryRoleInfoTbl', param).then(res => {
        const rolesArr = res.list
        if(rolesArr&&rolesArr.length>0){
          for (let i = 0; i < rolesArr.length; i++) {
            this.rolesOptions.push({
              key: rolesArr[i].roleId,
              label: rolesArr[i].roleName,
              disabled: false
            });
          }
        }
        this.getRoleMutualExclusion()
      })
    },
    //获取角色互斥配置
    getRoleMutualExclusion(){
      // this.get('/role/queryRoleMutualExclusion', {}).then(res => {
      //   this.roleMutualExclusion = res
      //   this.chooseRole([])
      // })
    },
    closeDialog() {
      this.$parent.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
  .password{
    width:44.5%;
  }
</style>
